import { useState, useContext } from 'react';
import type { DrawerProps, RadioChangeEvent } from 'antd';
import { Button, Drawer, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import DevSettingTabs from './DevSettingTabs';
import { AllContext,AllContextProvider} from '@src/Common/AllContext';
import { http_request, ac_cgi_url } from '@src/Common/Request';

export default () => {
    const { title, tabKey, devType, groupActionDrawer, group,messageApi } = useContext(AllContext);
    const [open, setOpen] = useState(false);
    const [groupValues, setGroupValues] = useState<any>({});
    const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
    const baseContext = useContext(AllContext);

    let titleBackup = 'AP';
    if (tabKey === 'router') {
        titleBackup = 'Router';
    }

    const showDrawer = () => {
        setOpen(true);
    };

    const getGroupById = () => {
        const request_params = new URLSearchParams();
        request_params.set("devType", tabKey);
        request_params.set("groupId", group.groupId);
          http_request(
            `${ac_cgi_url}?${request_params}`,
            request_params,
            'GET',
            {},
          ).then(responseObject => {
            if (!responseObject.success) {
              messageApi.warning(responseObject.msg);
              return null;
            }
            setGroupValues(responseObject.data);
          });
    };

    const onClose = () => {
        setOpen(false);
    };

    const onChange = (e: RadioChangeEvent) => {
        setPlacement(e.target.value);
    };



    const showButtonStyle = () => {
        if (groupActionDrawer === 'add') {
            return (
                <Button
                    type={'primary'}
                    size="small"
                    onClick={showDrawer}
                    className="GeneralButton"
                >
                    {title}
                    <PlusOutlined />
                </Button>
            );
        } else {
            return (
                <a
                    onClick={()=>{
                        showDrawer();
                        getGroupById();
                    }}
                >
                    {'编辑'}
                </a>
            );
        }
    };

    const newAllContext = { ...baseContext, closeDrawer: onClose, groupValues: groupValues};

    return (
        <>
            <Space>
                {showButtonStyle()}
            </Space>
            <Drawer
                title={`${title} (${titleBackup})`}
                placement={'left'}
                closable={false}
                onClose={onClose}
                open={open}
                key={placement}
                width={'70%'}
                destroyOnClose
                className='.ant-drawer-header'
            >
                <AllContextProvider value={newAllContext}>
                    <DevSettingTabs devType={devType} />
                </AllContextProvider>
            </Drawer>
        </>
    );
};